<template>
	<view>
		<!-- 用户信息 -->
		<view class="myView">
			<view class="top_box d-f flex-pa" ref="myView">
				<view class="user d-f flex-pa">
					<image :src="userData.avatarUrl" mode="aspectFit" class="radius avatar"></image>
					<view class="ml20">
						<view class="nickName">{{userData.nickName}}</view>
						<view class="spangrade">{{userGrade}}<text class="icon iconfont icon-jiantou" /></view>
						<!-- <view class="userId">ID：{{userData.userId}}</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="classifyBg" :style="'height: '+viewHeight+'px'">
			<view class="pt60">
				<!-- 分类 -->
				<view v-for="(item,index) in setMeal" :key="index" class="classifyRight" @click="onSelsct(index,item)">
					<view :class="item.select?'classifyRight-name color14864C':'classifyRight-name'">{{item.name}}
					</view>
				</view>
			</view>
			<view class="flex-1">
				<!-- 选项 -->
				<view class="top_tabs d-f tc">
					<view v-if="weight == 2 || weight == 3" :class="tabsvip == 1 ?'flex-1 tabs_bg ':'flex-1 '"
						@click="onTabs(1)" style="border-right: 6rpx solid #F7F7F7;">产品</view>
					<view :class="tabsvip == 0 ?'flex-1 tabs_bg ':'flex-1 '" @click="onTabs(0)">权益</view>
				</view>

				<view class="product">
					<block v-if="tabsvip == 0">
						<view class="equitylist">
							<scroll-view scroll-y="true" class="scrollViewNoe">
								<view class="equitylist_f" v-for="(item,index) in equity" :key="index">
									<view class="Conding f30" v-if="index == 0">
										<view class="fb mb10 f32">会员条件：</view>
										<view v-if="weight == 1">商城内任意消费首单注册。</view>
										<view v-if="weight == 2">商城内下单299元猪小兵礼包。</view>
										<view v-if="weight == 3">商城下单1980元猪团长礼包。</view>
										<view v-if="weight == 4">分享3次购买猪团长礼包产品自动升级猪师长。</view>
										<view v-if="weight == 5">第1-30名猪司令18万元，第31-100名猪司令30万元，
											第100名以后猪司令50万起。投资成为猪司令，成立区域公司，共同发展上市</view>
									</view>
									<view class="mb30">
										<view class="equitylist_index" :class="'backColor_'+index">
											权益{{index + 1}}
										</view>
										<view class="equitylist_item">
											<rich-text :nodes="item.content"></rich-text>
										</view>
									</view>
								</view>
								<image v-if="weight == 5" @click="onWayisPopup" class="commander"
									src="http://ruiyu.oss-cn-hangzhou.aliyuncs.com/image/newSaas/shilingshenqing.png"
									mode="aspectFit">
								</image>
								<view class="tc" v-if="!equity || !equity.length">暂无数据</view>
							</scroll-view>
						</view>
					</block>
					<block v-if="tabsvip == 1">
						<!-- 产品 -->
						<view class="equitylist">
							<scroll-view scroll-y="true" class="scrollViewNoe">
								<view class="upgrDataFor" v-for="(item,index) in upgrData.records" :key="index"
									@click="gotoDetail(item.productId)">
									<!-- <image v-if="weight == 2"
										src="http://ruiyu.oss-cn-hangzhou.aliyuncs.com/image/newSaas/xiaobing30.png" mode="aspectFit">
									</image>
									<image v-if="weight == 3"
										src="http://ruiyu.oss-cn-hangzhou.aliyuncs.com/image/newSaas/tuanzhang30.png"
										mode="aspectFit"></image> -->
									<image :src="item.productImage" mode="aspectFit"></image>
								</view>
							</scroll-view>
						</view>
					</block>
				</view>
			</view>
		</view>

		<!-- 司令弹窗 -->
		<Popup :show="isPopup" :width="width" :padding="0" @hidePopup="hidePopupFunc" class="popupBoxItem">
			<view class="popupBox">
				<view class="p-60-60-0-60">
					<view class="box_title">
						<view>猪司令誓词</view>
					</view>
					<view class="box_item mt30">一、我<text class="fb">认同</text>猪多多企业产品、团队、模式以及文化：
						<text style="color: #14864C;" class="fb">让一亿家庭吃上健康肉！</text>
					</view>
					<view class="box_item">二、我<text class="fb">愿意</text>
						贡献我所有资源来推广、分享猪多多这份伟大事业！
					</view>
					<view class="box_item">三、我<text class="fb">相信</text>
						我的能力能够推动猪多多事业的高速发展！
					</view>
					<view class="box_item">四、我<text class="fb">理解</text>
						投资有风险；能够享受猪多多伟业成功的荣光，也能够承担相应的风险！
					</view>
					<view class="signature">
						<view>签名：</view>
						<image :src="signatureimg" mode="" @click="onWaygosigna"></image>
					</view>
					<view class="signature mt20">
						<view>联系方式：</view>
						<input type="number" v-model="mobile" />
					</view>
					<view class="signature mt20 d-b-c mb20">
						<button @click="hidePopupFunc(true)">取消</button>
						<button @click="onWaySubmit">确定</button>
					</view>
					<view class="tail">您将是第 <text>{{mun}}</text> 位猪司令</view>
				</view>
			</view>
		</Popup>
	</view>

</template>

<script>
	import config from '@/env/config.js';
	import Popup from '@/components/uni-popup.vue';
	export default {
		components: {
			Popup
		},
		data() {
			return {
				// 弹窗参数
				isPopup: false,
				width: 600,
				mobile: '', //司令申请电话
				mun: 99,
				signatureimg: '', //签名
				// 其他
				viewHeight: 0,
				tabsvip: 0,
				userData: uni.getStorageSync('userData'),
				userGrade: uni.getStorageSync('userGrade'),
				setMeal: [{
					name: '猪新兵',
					select: false,
					weight: 1

				}, {
					name: '猪小兵',
					select: false,
					weight: 2

				}, {
					name: '猪团长',
					select: false,
					weight: 3
				}, {
					name: '猪师长',
					select: false,
					weight: 4
				}, {
					name: '猪司令',
					select: false,
					weight: 5
				}],
				equity: [],
				equity1: [{
					content: '获得会员分享和购物奖励。'
				}, {
					content: '会员分享所有级别奖励5%'
				}, {
					content: '购物奖励5%'
				}],
				equity2: [{
					content: '获得299元猪肉或其他礼包产品。'
				}, {
					content: '获得299元积分。'
				}, {
					content: '获得商城购物会员价一年。'
				}, {
					content: '商城抽奖获积分。'
				}, {
					content: '分享同级别会员购买礼包产品按10%+20%+70%依次循环奖励。分享其他级别购买礼包产品按10%奖励'
				}, {
					content: '购物奖励6%。'
				}],
				equity3: [{
					content: '获得1980元猪肉或其他礼包产品。'
				}, {
					content: '获得1980积分。'
				}, {
					content: '获得商城永久购物会员价。'
				}, {
					content: '商城抢红包，陆续抢回1980元止。'
				}, {
					content: '分享同级别会员购买礼包产品按10%+20%+70%依次循环奖励。分享其他级别购买礼包产品按10%奖励，分享3次购买猪团长礼包产品后升级成猪师长。'
				}, {
					content: '购物奖励7%。'
				}],
				equity4: [{
					content: '前100位免费获得线下开店资格(价值2.98万元)'
				}, {
					content: '前100位获得上市前原始股权购买资格。'
				}, {
					content: '<div  style="color: #14864C;font-weight: bold;">会员分享获得“共同富裕”奖励：</div>  <span  style="color: #14864C;font-weight: bold;">基金:</span>每增加1位猪团长增加140元。 <br> <span  style="color: #14864C;font-weight: bold;">原则:</span>每新增100位猪师长或七天内未新增100位猪师长也分红一次。 <br> <span  style="color: #14864C;font-weight: bold;">退休:</span>每一位猪师长累计奖励100万后停止奖励。'
				}, {
					content: '<div  style="color: #14864C;font-weight: bold;">会员分享参与百万销冠奖励：</div><span  style="color: #14864C;font-weight: bold;">奖池:</span>每增加1位猪团长就增加140元。 <br><span  style="color: #14864C;font-weight: bold;">原则:</span>每周排行分享购买礼包产品，按55%-9-8-7-6-5-4-3-2-1%奖励前十名。'
				}, {
					content: '购物奖励8%。'
				}],
				equity5: [{
					content: '享有猪团长基本权益。'
				}, {
					content: '获得线下6家开店资格(价值18万元)。'
				}, {
					content: '一年内未回本，补足差价。'
				}, {
					content: '<div  style="color: #14864C;font-weight: bold;">会员分享奖励：</div> 猪司令公司所有会员购买礼包产品奖励10%。 <br>推荐的猪司令公司所有会员购买礼包产品奖励2%。'
				}, {
					content: '分享会员购物奖励10%。 <br>猪司令公司其他会员购物奖励2%。'
				}],
				weight: 2, //类型
				upgrData: [], //课程
			}
		},
		onLoad(option) {
			if (option.weight) this.onSelsct(option.weight - 1, this.setMeal[option.weight - 1])
		},
		onShow() {
			console.log(this.signatureimg, '签名图片');
		},
		mounted() {
			this.getViewHeight();
		},
		methods: {
			//选择权益
			onSelsct(arr, price) {
				this.setMeal.map((item, index) => {
					item.select = index == arr ? true : false
				});
				let index = arr + 1;
				this.equity = this['equity' + index];
				this.weight = price.weight;
				this.tabsvip = this.weight == 2 || this.weight == 3 ? 1 : 0;
				if (this.weight == 2 || this.weight == 3) this.postWayData(this.weight);
			},
			onTabs(index) {
				if (index == this.tabsvip) return
				this.tabsvip = index
			},
			//获取tabs高度
			getViewHeight() {
				let that = this
				uni.getSystemInfo({
					success: function(res) {
						const view = uni.createSelectorQuery().select('.myView');
						view.boundingClientRect(data => {
							that.viewHeight = res.screenHeight - data.height
						}).exec();
					}
				});

			},
			/*跳转产品详情*/
			gotoDetail(e) {
				let url = '/pages/product/detail/detail?productId=' + e;
				this.gotoPage(url);
			},
			// 打开弹窗
			onWayisPopup() {
				this.isPopup = true;
				uni.setNavigationBarTitle({
					title: '猪司令申请'
				});
			},
			/*关闭弹窗*/
			hidePopupFunc(e) {
				this.isPopup = false;
				uni.setNavigationBarTitle({
					title: '会员权益'
				});
				this.$emit('close');
			},
			onWaygosigna() {
				this.gotoPage('/pagesLive/vip/signature/signature');
			},
			onWaySubmit() {
				uni.showToast({
					title: '暂未开启',
					icon: 'none'
				})
			},

			/*****请求*****/
			postWayData(weight) {
				let that = this
				uni.showLoading({
					title: '加载中'
				})
				that._postBody(
					'product/product/upgradeLists', {
						weight: weight
					},
					function(res) {
						uni.hideLoading()
						that.upgrData = res.data
					}
				);
			},


		}

	}
</script>

<style>
	page {
		background: #EEEEEE;
	}
</style>

<style lang="scss" scoped>
	.top_box {
		height: 244rpx;
		background: linear-gradient(-41deg, #009946, #18A86B);

		.user {
			margin-left: 60rpx;
			color: white;
			font-family: PingFang SC;

			.avatar {
				width: 106rpx;
				height: 106rpx;
				background-color: #cecece;
			}

			.nickName {
				font-weight: bold;
				font-size: 36rpx;
				margin-bottom: 20rpx;
			}

			.spangrade {
				margin-top: 10rpx;
				height: 35rpx;
				background: linear-gradient(90deg, #57575C, #363B3F);
				border-radius: 20rpx;
				font-weight: 500;
				font-size: 20rpx;
				text-align: center;
				color: #FFF;
				line-height: 35rpx;
				width: 100rpx;
				padding: 0 10rpx;

				.icon-jiantou {
					font-size: 16rpx;
					font-weight: bold;
					float: right;
				}
			}

			.userId {
				font-size: 26rpx;
			}
		}

	}

	.flex-pa {
		align-items: center;
	}

	.setMealcls {
		padding: 10rpx;
		font-family: PingFang SC;

		.setMealcls_f {
			width: 50%;
			text-align: center;
			background-image: url('http://ruiyu.oss-cn-hangzhou.aliyuncs.com/image/zhuduoduo/vipbg2.png');
			background-size: 100%;
			height: 180rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 10rpx;

			.set_name {
				font-weight: bold;
				font-size: 36rpx;
				color: #FFFFFF;
				margin-bottom: 20rpx;
			}

			.set_price {
				font-weight: bold;
				font-size: 36rpx;
				color: #FFE21F;
			}
		}

		.setMealcls_bg {
			background-image: url('http://ruiyu.oss-cn-hangzhou.aliyuncs.com/image/zhuduoduo/vipbg.png');
		}
	}

	.equitylist {
		padding: 10rpx 20rpx;
		font-family: PingFang SC;
		margin-bottom: 40rpx;
		background-color: #F7F7F7;

		.scrollViewNoe {
			height: 68vh;
			padding: 10rpx 0;

			.upgrDataFor image {
				width: 500rpx;
				height: 300rpx;
				display: block;
				margin: 0 auto;
				background-color: #ebebeb;
				border-radius: 10rpx;
			}
		}

		.equitylist_f {
			position: relative;
			padding: 10rpx;

			.Conding {
				font-weight: 400;
				color: #777575;
				background: #EEEEEE;
				border-radius: 10rpx;
				padding: 20rpx 40rpx 20rpx 20rpx;
				margin-bottom: 30rpx;
			}

			.equitylist_index {
				width: 103rpx;
				height: 40rpx;
				line-height: 40rpx;
				// background: #6AC093;
				border-radius: 10rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;
			}

			.equitylist_item {
				font-weight: 400;
				font-size: 25rpx;
				color: #595757;
				margin-top: 10rpx;
				line-height: 40rpx;
			}

		}
	}


	.top_tabs {
		color: #000;
		font-size: 32rpx;
		font-weight: bold;

		.flex-1 {
			padding: 20rpx;
		}

		.tabs_bg {
			color: #D22F12;
		}
	}

	.classifyBg {
		background: #EEEEEE;
		display: flex;

		.classifyRight {
			width: 175rpx;
			padding: 40rpx 0;

			.classifyRight-name {
				width: 103rpx;
				height: 33rpx;
				font-family: Microsoft YaHei;
				text-align-last: justify;
				font-weight: bold;
				font-size: 26rpx;
				color: #333;
				margin: 0 auto;
			}

			.color14864C {
				color: #14864C;
			}

		}
	}

	.commander {
		width: 378rpx;
		height: 105rpx;
		display: block;
		margin: 0 auto;
	}

	.backColor_0 {
		background: #6AC093;
	}

	.backColor_1 {
		background: #4490CD;
	}

	.backColor_2 {
		background: #F29533;
	}

	.backColor_3 {
		background: #34BAB5;
	}

	.backColor_4 {
		background: #70C1ED;
	}

	.backColor_5 {
		background: #C13D24;
	}

	.backColor_6 {
		background: #ECD746;
	}

	.popupBoxItem ::v-deep.uni-mask {
		background-color: #FFF !important;
	}

	.popupBox {
		background-image: url('http://ruiyu.oss-cn-hangzhou.aliyuncs.com/image/newSaas/zhushilsqbg.png');
		background-size: 100%;
		width: 100%;
		height: 1080rpx;
		border-radius: 40rpx;
		font-family: Microsoft YaHei;

		.box_title {
			width: 343rpx;
			height: 79rpx;
			line-height: 79rpx;
			text-align: center;
			background: linear-gradient(0deg, #D22F12, #FF7F68);
			border-radius: 40rpx;
			border: 2rpx solid #E5C564;
			margin: 0 auto;

			view {
				font-weight: bold;
				font-size: 49rpx;
				color: #6ED0AD;
				text-shadow: 0rpx 5rpx 3rpx rgba(185, 185, 3, 0.3);
				background: linear-gradient(0deg, #E4C25C 0%, #FCF6EA 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

		}

		.box_item {
			font-weight: 400;
			font-size: 26rpx;
			line-height: 40rpx;
			color: #DF482C;
			margin-bottom: 30rpx;
		}

		.signature {
			font-weight: bold;
			font-size: 26rpx;
			color: #14864C;
			display: flex;
			align-items: center;

			image {
				width: 385rpx;
				height: 155rpx;
				background: #FCF5E8;
				border-radius: 14rpx;
				display: block;
			}

			input {
				width: 190rpx;
				height: 55rpx;
				background: #FCF5E8;
				border-radius: 14rpx;
				padding: 0 15rpx;
				color: #333;
			}

			button {
				background: linear-gradient(0deg, #1C8D53 0%, #7DDAAB 100%);
				border-radius: 14rpx;
				text-shadow: 0 0.15625rem 0.09375rem rgba(185, 185, 3, 0.3);
				color: #E3D28B;
				font-weight: bold;
				width: 195rpx;
				box-shadow: 1rpx 2rpx 1rpx #333;
			}
		}

		.tail {
			font-weight: bold;
			font-size: 23rpx;
			color: #D22F12;
			text-align: center;

			text {
				text-decoration: underline;
			}
		}
	}
</style>